<template>
	<view class="container-fault">		
		<view class="title">
			<text>报修类别：</text>
		</view>
		
		<radio-group class="group-layer" @change="onRadioChange">
			<label v-for="(item,index) in repairArray" :key="item.value" class="item-layer">
				<view class="item-content">
					<text>{{item.name}}</text>
					<radio :value="item.value"  :checked="(problemtype===index)"></radio>
				</view>
			</label>
		</radio-group>
		
		<view class='title'>
			<text>报修内容描述：</text>
		</view>
		<textarea class="text-area" placeholder='例：使用APP闪退'  v-bind:value ="repairContent" maxlength='200' @input='onRepairContent'>
		</textarea>
		
		<view class='title'>
			<text>联系电话：</text> 
		</view>
		
		<input class="phone-input" type="number" placeholder="请输入不超11位的电话号码" maxlength="11" @input ='onPhoneNumber'/>
	
		
		<view class="submit-layer">
			<button class='button' hover-class='button-hover' @click ='onSubmit'>
			      点击提交
			</button>
		</view>	
		
		<view class="service-call">
			<view class="phone-layer">
				客服热线：<text class="phone-color">{{servicePhone}}</text>
			</view>
		</view>
				
	</view>
</template>

<script>
	import apis from '../../../api.js'
	import httpRequest from '@/utils/utilHttp.js'
	import {
		mapState,
		mapMutations
	} from 'vuex' //导入vuex的mapState和mapMutations方法
	
	export default {
		data() {
			return {
				repairArray:[{value:'0', name:'节目无信号'}, {value:'1', name:'机顶盒无响应'}, {value:'2', name:'无法上网'}, {value:'3', name:'指示灯不亮'}, {value:'4', name:'其他'}],
				servicePhone:'0768-5822723',
				problemtype: 0,
				repairContent:'',
				phoneNumber:0
			}
		},
		onLoad(option) {			
			this.servicePhone = option.servicePhone;			
		
		},
		computed:{
			...mapState(['token', 'picPath', 'userInfo']),
		},		
		methods: {
			onRadioChange(e){
				let self = this;
				let value = e.detail.value;	
				self.problemtype = parseInt(value);		
				//console.log(value);
			},
			onRepairContent(e){
				let self = this;
				self.repairContent = e.detail.value;
				//console.log(self.repairContent);
			},
			onPhoneNumber(e){
				let self = this;
				self.phoneNumber = e.detail.value;
				//console.log(self.phoneNumber);
			},
			showToast(msg){
				uni.showToast({
					title: msg,
					icon: "none"
				})
			},
			onSubmit(){
				let self = this;
				if(self.repairContent === '')
				{
					self.showToast('请填写报修内容，不可为空！');
				}
				else if(self.phoneNumber.length != 11){
					self.showToast('请输入11位大陆手机号码！');					
				}
				else{
					let param = {
						"netid": self.userInfo.netId,
						"userid": self.userInfo.userId,
						"type": '0',//类型：0故障 1投诉
						"telephone": self.phoneNumber,
						"problemtype": self.repairArray[self.problemtype].name,
						"content": self.repairContent
					};	
					/*								
					uni.uploadFile({
					    url: httpRequest.requestUrl.repair_post, //仅为示例，非真实的接口地址
					    filePath: self.picPath, // 图片本地路径
					    name: 'file', // 写死
					    // 请求头一定要加，否则 iOS 图片上传会失败 安卓 可有可无
					    header: {
					        'content-type': 'multipart/form-data' 
					    },
					    formData: param,
					    success: (uploadFileRes) => {
					        console.log(uploadFileRes);
					    },
					    fail: (err) => {
					        console.log(err)
					    }
					});
					*/
					
					let options = {
						url:httpRequest.requestUrl.repair_post,
						name:'filex',
						filePath: self.picPath,
						formDatas:param
					};
					httpRequest.UploadFile(options).then(res => {	
						console.log(res);
						if (res.statusCode == 200) {
							uni.showToast({
								icon:'success',
								title:"提交成功...",
							});	
							setTimeout(function(){
								uni.navigateBack({delta:1})
							},1000)						
						}											
					});	
					
				}
			}			
		}
	}
</script>

<style>
	page{
		background-color: #F6F6F6;
		font-size: 32rpx;
	}
	.container-fault {
		width:100%;		
		display: flex;
		flex-direction: column;
		background-color: white;
		color: #333333;
	}
	.title{	
		width: 100%;		
		display: flex;
		justify-content:flex-start;
		align-items: center;
		padding: 20rpx;
	}	
	.group-layer{
		height: 450rpx;
		display: flex;
		flex-direction: column;
		border: 1rpx solid #e3e3e5;
		border-radius: 10rpx;
		margin: 0rpx 20rpx 0rpx 20rpx;
	}
	.item-layer{
		flex: 1;
		display: flex;		
		flex-direction: column;	
		justify-content: space-between;
	}
	.item-content{
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 0rpx 10rpx 0rpx 10rpx;
	}
	.line{		
		width: 100%;
		height: 1rpx;		
		background-color: #e3e3e5;		
	}
	
	//----
	.text-area{
		height: 200rpx;
		width: calc(100% - 60rpx);		
		border: 1rpx solid #e3e3e5;
		border-radius: 10rpx;		
		margin: 0rpx 20rpx 0rpx 20rpx;
		padding: 10rpx;
	}
	
	//----
	.phone-input{
		width: calc(100% - 60rpx);		
		border: 1rpx solid #e3e3e5;
		border-radius: 10rpx;
		margin: 0rpx 20rpx 20rpx 20rpx;
		padding: 15rpx 10rpx 15rpx 10rpx;
	}
	
	//---
	.submit-layer{
		background-color: #f6f6f6;
		width: calc(100% - 40rpx);
		padding: 40rpx 20rpx 140rpx 20rpx;
	}
	.button{
		height: 100rpx;
		background-color: #00b9ef;
		color: white;
		border-radius: 20rpx;
		padding: 10rpx 20rpx 10rpx 20rpx;
		
		display: flex;		
		justify-content: center;
		align-items: center;
	}
	.button::after{
		border: none;
	}
	
	//---
	.service-call{
		height: 100rpx;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center; 
		background-color: white;
	}
	.phone-layer{
		flex: 1;
		display: flex;		
		justify-content: center;
		align-items: center;		
	}
	.phone-color{
		color: #00B9EF;
	}

</style>
